<template>
	<view>
		<view class="swiperBox">
			<view class="swiper">
				<u-swiper :list="swiperList"></u-swiper>
			</view>
		</view>
		<u-grid :border="false" :col="4" style="padding:16rpx 0">
			<u-grid-item v-for="(item,index) in gripList" :key="index">
				<image :src="item.name" mode="aspectFill" class="gridImg" @click="toPage(item)"></image>
				<text class="grid-text">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
		<u-gap height="8" bg-color="#f2f2f2"></u-gap>
		<u-dropdown ref="uDropdown" active-color="#FF6801">
			<u-dropdown-item title="区域距离">
				<view class="dropdown-box" style="background-color: #FFFFFF;">
					<u-row gutter="16" >
						<u-col span="3" v-for="(item, index) in distanceData" :key='index'>
							<view :class="['dropdown-item', searchData.scope == item.value? 'active' : '']" @click="changeFilter(item, 'scope')">{{item.label}}</view>
						</u-col>
					</u-row>
				</view>
			</u-dropdown-item>
			<u-dropdown-item title="行业">
				<view class="dropdown-box" style="background-color: #FFFFFF;">
					<u-row gutter="16" >
						<u-col span="3" v-for="(item, index) in industryData" :key='index'>
							<view :class="['dropdown-item', searchData.industry == item.label? 'active' : '']" @click="changeFilter(item, 'industry')">{{item.label}}</view>
						</u-col>
					</u-row>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<view class="SQBOX">
			<DeliciousFoodList :list="tableData" @success="cilckItem"></DeliciousFoodList>
			<u-loadmore style="margin:30rpx 0" :status="status"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import DeliciousFoodList from '../../../components/deliciousFoodList/index.vue'
	import gripList from './gridlist.js'
	export default {
		components: {
			DeliciousFoodList
		},
		data() {
			return {
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				gripList: gripList.data,
				SQData: gripList.SQData,
				distance: '', //区域距离
				industry: '', //行业
				// {
					// 	label: '无限制',
					// 	value: '',
					// },
				distanceData: [
					{
						label: '1KM',
						value: 1,
					},
					{
						label: '2KM',
						value: 2,
					}, {
						label: '4KM',
						value: 4,
					},{
						label: '5KM',
						value: 5,
					}, {
						label: '8KM',
						value: 8,
					}
				],
				industryData: [],
				searchData: {
					page: 1,
					size: 10,
					industry: '', //行业
					scope: 5, // 范围,单位千米
					shortName: '', //商店简称
					latitude: '', //纬 31.465094
					longitude: '', //经 104.724352
					regionName: '', //区域名称 绵阳市
				},
				total: 0,
				tableData: [],
				status: 'loadmore',
				
			}
		},
		mounted() {
			// this.$u.utils.getLocationName()
			// this.searchData.latitude = uni.getStorageSync('lat');
			// this.searchData.longitude = uni.getStorageSync('lng');
			// this.searchData.regionName = uni.getStorageSync('city');
			// this.getList()
			// 在H5端uni.getLocation不调用的原因是因为必须在HTTPS的环境下，并且谷歌浏览器极有可能把你的请求给墙掉，所以是无法调用起来uni.getLocation
			let _this = this;
			let amap_key = "914e53e8abb36cddf40df408b4e41912"
			uni.getLocation({
				type:'gcj02',
				success(pos) {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						data: {
							location: `${pos.longitude},${pos.latitude}`,
							key: amap_key,
							poitype: '城市',
						},
						success(res) {
							_this.searchData.longitude = pos.longitude;
							_this.searchData.latitude = pos.latitude;
							_this.searchData.regionName = res.data.regeocode.addressComponent.city;
							_this.getList()
						}
					});
				}
			})
			// this.getList()
			this.getIndustry()
		},
		methods:{
			toPage(url) {
				if (url.open) {
					if (url.token) {
						let token = uni.getStorageSync('token');
						if(token){
							uni.navigateTo({
								url: url.url
							})
						}else{
							uni.navigateTo({
								url:'/pages/login/index'
							})
						}
					} else {
						uni.navigateTo({
							url: url.url
						})
					}
				} else {
					uni.showToast({
						icon:'none',
						title: '敬请期待'
					});
				}
				
			},
			cilckItem(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/businessDistrict/businessDetail?shop=' + JSON.stringify(item)
				})
			},
			onReachBottom() {
				if(this.tableData.length >= this.total) return ;
				this.status = 'loading';
				this.searchData.page = ++ this.searchData.page;
				setTimeout(() => {
					this.getList()
					if(this.tableData.length >= this.total) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			getList() {
				this.$u.api.getUnderlineMerchant(this.searchData).then(res => {
					if(res.code == 0) {
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.extraInfo;
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			getIndustry() {
				this.$u.api.getIndustry().then(res => {
					if(res.code == 0) {
						let list = []
						res.data.forEach(item => {
							if (item.children.length > 0 ) {
								let child = item.children
								for (let i = 0; i < child.length; i++) {
									list.push({
										value: child[i].industry,
										label: child[i].industry
									})
								}
							}
							
						})
						
						this.industryData = list;
						// this.searchData.industry = this.industryData.length > 0 ? this.industryData[0].label : ''
					}
				})
			},
			// 初始化分页
			initSearch() {
				this.searchData.page = 1;
				this.tableData = [];
				this.total = 0;
				this.status = 'loading';
			},
			changeFilter(item, type) {
				this.searchData[type] = item.value;
				this.$refs.uDropdown.close();
				this.initSearch()
				this.getList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		padding: 15rpx 30rpx;
	}

	.swiperBox {
		width: 100%;
		height: 200rpx;
		background: linear-gradient(to right, #FF6801, #FF9832);
		margin-bottom: 70rpx;
	}

	.gridImg {
		width: 80rpx;
		height: 80rpx;
	}

	.grid-text {
		font-size: 28rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	>>>.u-flex {
		display: flex;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.dropdown-box {
		padding-bottom: 30rpx;
		
		.dropdown-item {
			padding: 10rpx 0;
			text-align: center;
		}
		.active {
			color: #FF6600;
		}
		
	}
</style>
